@page "/maps/annotation"

@using Syncfusion.Blazor.Maps

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample depicts the facts about Africa in an annotation. Africa shape is filled with gradient color.</p>
</SampleDescription>
<ActionDescription>
    <p>In this example, you can see how to place a desired HTML element at desired location in the maps. Any number of annotation can be placed on the maps. In this sample, the gradient fill color has been applied for the shape.</p>
</ActionDescription>

<div class="control-section">
    <SfMaps>
        <MapsZoomSettings Enable="false" />
        <MapsAnnotations>
            <MapsAnnotation X="0%" Y="70%">
                <ContentTemplate>
                    <div class="annotationTemplate">
                        <div>
                            <p style="margin-left:10px;font-size:13px;font-weight:500">Facts about Africa</p>
                        </div>
                        <hr style="margin-top:-3px;margin-bottom:10px;border:0.5px solid #DDDDDD">
                        <div>
                            <ul style="list-style-type:disc; margin-left:-20px;margin-bottom:2px; font-weight:400">
                                <li>Africa is the second largest and second most populated continent in the world.</li>
                                <li style="padding-top:5px;">Africa has 54 sovereign states and 10 non-sovereign territories.</li>
                                <li style="padding-top:5px;">Algeria is the largest country in Africa, where as Mayotte is the smallest.</li>
                            </ul>
                        </div>
                    </div>
                </ContentTemplate>
            </MapsAnnotation>
            <MapsAnnotation X="80%" Y="5%">
                <ContentTemplate>
                    <div>
                        <img src="images/maps/compass.svg" height="75px" width="75px" />
                    </div>
                </ContentTemplate>
            </MapsAnnotation>
        </MapsAnnotations>
        <MapsLayers>
            <MapsLayer ShapeData='new {dataOptions ="data/maps/africa.json"}' TValue="string">
                <MapsShapeSettings Fill="url(#grad1)" />
                <MapsMarkerSettings>
                    <MapsMarker Visible="true" DataSource="@MarkerDataSource" TValue="MarkerData">
                        <MarkerTemplate>
                            @{
                                var Data = context as MarkerData;
                                <div style="margin-left:-45px;margin-top:-20px"><h3 style="color:#FFFFFF">@Data.Name</h3></div>
                            }
                        </MarkerTemplate>
                    </MapsMarker>
                </MapsMarkerSettings>
            </MapsLayer>
        </MapsLayers>
    </SfMaps>
    <div class="urllink">
        Source:
        <a href="https://en.wikipedia.org/wiki/Africa" target="_blank">en.wikipedia.org</a>
    </div>
</div>
<svg height="30" width="400">
    <defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" style="stop-color:#C5494B;stop-opacity:1" />
            <stop offset="100%" style="stop-color:#4C134F;stop-opacity:1" />
        </linearGradient>
    </defs>
</svg>
<style>
    .annotationTemplate {
        color: #DDDDDD;
        box-shadow: 0px 2px 5px #666;
        -webkit-box-shadow: 0px 2px 5px #666;
        -moz-box-shadow: 0px 2px 5px #666;
        font-size: 12px;
        width: 300px;
        width: 300px;
        border-radius: 2px;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        font-family: Roboto;
        background: #3E464C;
        margin: 20px;
        padding: 10px;
    }
</style>
@code {
    public class MarkerData
    {
        public double Latitude { get; set; }
        public double Longitude { get; set; }
        public string Name { get; set; }
    };
    public List<MarkerData> MarkerDataSource = new List<MarkerData> {
        new MarkerData { Latitude=13.97274101999902, Longitude=20.390625, Name="Africa" }
    };
}